<template>
  <div>
    <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="line-height: 10px;margin-left: 25px"
    >
      <el-form-item label="医生姓名">
        <el-input
            v-model="formInline.doctor"
            placeholder="医生姓名"
        ></el-input>
      </el-form-item>
      <el-form-item label="预约科室名称">
        <el-select
            v-model="formInline.department"
            placeholder="预约科室名称">

          <el-option
              v-for="department in departments"
              :key="department.id"
              :label="department.name"
              :value="department.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="状态">
          <el-option lable="正在处理" value="正在处理"></el-option>
          <el-option
              lable="诊断完成，待缴费"
              value="诊断完成，待缴费"
          ></el-option>
          <el-option lable="已缴费" value="已缴费"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="select">查询</el-button>
        <el-button type="danger" plain @click="resetForm"
        >重置
        </el-button
        >
      </el-form-item>
    </el-form>
    <el-card class="box-card-docView" style="margin-left: 20px">
      <el-table
          border
          center
          :cell-style="{ padding: '7px'}"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column prop="id" label="病历编号"></el-table-column>
        <el-table-column prop="name" label="病人姓名"></el-table-column>
        <el-table-column prop="gender_name" label="性别">
               <template slot-scope="scope">
            <el-tag type='warning' v-if="scope.row.gender_name=='男'">男</el-tag>
            <el-tag type='warning' v-else-if="scope.row.gender_name=='女'">女</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="doctor_name" label="预约医生"></el-table-column>
        <el-table-column prop="department_type_name" label="预约科室类型">
        </el-table-column>
        <el-table-column prop="department_name" label="预约科室名称">
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.state === 1" type="danger">诊断完成,待缴费</el-tag>
            <el-tag size="small" v-if="scope.row.state===2" type="success">已缴费</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="diagnosis" label="诊断结果"></el-table-column>
        <el-table-column fixed="right" label="查看详情">
          <template slot-scope="scope">
            <el-button
                el-button
                type="primary"
                icon="el-icon-search"
                circle
                @click="diagnosis(scope.row)"
                size="small"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    :total="departmentPageDto.totalRow"-->
    <el-pagination
        background
        layout="prev, pager, next,total"
        :total=departmentPageDto
        :page-size=filter.size
        style="margin-left: 600px; margin-top: 30px"
        @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  mounted() {
    window.Vue = this;
  },
  data() {
    return {
      tableData: [{
        id:'',
        name:'',
        gender_name:'',
        doctor_name:'',
        department_type_name:'',
        department_name:'',
        state:'',
      }],
      user: {},
      formInline: {
        doctor: "",
        department: "",
        status: "",
      },
      filter: {
        size: 3,       // 单页数据量
        page: 1,
      },
      departments: [],
      pageTotal: "",
      departmentPageDto: {},
    };
  },
  created() {
    this.user = this.$getSessionStorage("user");
    //this.patientRegister();
    this.selectDepartmentClassification();
    this.paging(1);
  },
  methods: {
    select(pageNum) {
      var statusResult = this.formInline.status;
      if (statusResult.indexOf("已缴费") >= 0) {
        statusResult = "已缴费";
      }
      //axios查询科室列表请求((分页有参))
      var a = isNaN(pageNum);
      console.log(a);
      if (isNaN(pageNum) == true) {
        pageNum = 1;
      }
      this.filter.page = pageNum
      this.$axios
          .get(this.$settings.BASE_URL + `outpatient/patientgetvue/?doctor=${this.formInline.doctor}&department=${this.formInline.department}`, {
            params: this.filter,
            // status: statusResult,
          })
          .then((Response) => {
            console.log(this.formInline.department)
            this.tableData = Response.data.infos.results;
            this.departmentPageDto = Response.data.infos.count;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    diagnosis(row) {
      this.$router.push({
        path: "/index/toDocView",
        query: {row: row},
      });
    },
    patientRegister() {
      //axios查询诊断数据请求
      this.$axios
          .post("/register/selectDoctorDiagnosisAll", {})
          .then((Response) => {
            this.tableData = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleSelectionChange(val) {
      this.select(pageNumber);
    },
    resetForm() {
      location.reload();
    },
    paging(pageNum) {
      //axios查询科室列表请求(分页无参)
      console.log(pageNum)
      this.$axios
          .get(this.$settings.BASE_URL + "outpatient/patient_get/",
              //     {
              //   pageNum: pageNum,
              // }
          )
          .then((Response) => {
            console.log(Response.data.infos.results)
            this.tableData = Response.data.infos.results;
            this.departmentPageDto = Response.data.infos.count;
            console.log(this.departmentPageDto);
          })
          .catch((error) => {
            console.error(error);
          });
    },
    handleCurrentChange(pageNumber) {
      this.select(pageNumber);
    },
    selectDepartmentClassification() {
      //axios查询科室分类请求
      this.$axios
          .get(this.$settings.BASE_URL + "user/department/")
          .then((Response) => {
            this.departments = Response.data;
          })
          .catch((error) => {
            console.error(error);
          });
    },
  },
};
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card-docView {
  margin-top: 0px;
  width: 1280px;
}
</style>